<template>
  <n-config-provider :theme="theme">
    <div class="IndexAdmin" :style="{width:screenWidth,height:screenHeight-20+'px'}">
      <n-space vertical :style="{width:screenWidth,height:screenHeight-20+'px'}">
        <!--      <n-space> <n-switch v-model:value="inverted" /> inverted </n-space>-->
        <n-layout>
          <!-- 后台头部 -->
          <!-- 改变主题 -->
          <n-card>
            <n-layout-header :inverted="inverted" bordered>
              <!-- 后台头部的logo -->
              <n-avatar :style="{color: 'yellow',backgroundColor: 'red'}">M</n-avatar>
              <p>知识无忧</p>
              <n-space>
                <!-- 主题深浅色按钮 -->
                <n-button @click="theme = darkTheme" text>
                  <n-icon size="25" color="darkgray">
                    <Moon/>
                  </n-icon>
                </n-button>
                <n-button @click="theme = null" text>
                  <n-icon size="25" color="darkorange">
                    <SunnyOutline/>
                  </n-icon>
                </n-button>
              </n-space>
            </n-layout-header>
          </n-card>
          <!-- body -->
          <n-layout has-sider :style="{width:screenWidth+'px',height:screenHeight-105+'px'}">
            <!-- 左侧菜单 -->
            <n-layout-sider bordered show-trigger collapse-mode="width" collapsed-width="64" :width="200"
                            :native-scrollbar="true"
                            :inverted="inverted" @collapse="menu_contraction" @expand="menu_expansion">
              <!-- 菜单项 -->
              <n-menu :inverted="inverted" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions"
                      @update-value="fill_index_content" :collapsed="collapsed"/>
            </n-layout-sider>
            <!-- 主页面（侧边栏点击后显示页面）-->
            <n-layout :style="{width:indexContentWidth,height:screenHeight-105+'px'}" class="index_content">
              <n-space class="index_content1" :style="{width:indexContentWidth+'px',height:screenHeight-105+'px'}">
                <!-- 显示跳转的路由-->
                <router-view/>
              </n-space>
            </n-layout>
          </n-layout>
        </n-layout>
      </n-space>
    </div>
  </n-config-provider>
</template>

<script>
import { h, defineComponent, ref, onMounted } from 'vue'
// eslint-disable-next-line no-unused-vars
// zhCN dateZhCN NConfigProvider => 汉英转化
// darkTheme => 主题色调转化

import { NIcon, darkTheme } from 'naive-ui'
import {
  BookOutline as BookIcon,
  // 调节主题的图标
  SunnyOutline,
  Moon
  // PersonOutline as PersonIcon,
  // WineOutline as WineIcon
} from '@vicons/ionicons5'
// 导入路由
import { useRouter } from 'vue-router'

function renderIcon (icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions = [
  {
    label: '博客类型',
    key: 'BlogType',
    icon: renderIcon(BookIcon)
  },
  {
    label: '用户',
    key: 'UserType',
    icon: renderIcon(BookIcon)
  },
  {
    label: '上线情况',
    key: 'onlineSituation',
    icon: renderIcon(BookIcon)
  },
  {
    label: '帮助中心',
    key: 'help',
    icon: renderIcon(BookIcon),
    children: [
      {
        // type: 'group',
        label: '反馈',
        key: 'Feedback'
      },
      {
        label: '合作',
        key: 'cooperation'
        // icon: renderIcon(WineIcon),
      }
    ]
  },
  {
    label: '违规操作',
    key: 'IllegalOperation',
    icon: renderIcon(BookIcon)
  }
]

export default defineComponent({
  components: {
    // 调节主题的图标
    SunnyOutline,
    Moon
    // UserNumberCategory,
    // TypeVerticalDrawing
  },
  setup () {
    const router = useRouter()
    // 获取屏幕的高度
    const screenHeight = document.documentElement.clientHeight
    // 获取屏幕的宽度
    const screenWidth = document.documentElement.clientWidth
    // 一开始首页内容的宽度
    const indexContentWidth = ref(screenWidth - 200)
    // 一开始菜单是否展开  false为不展开
    const collapsed = ref(false)
    onMounted(() => {
      // 跳转页面
      router.push({ name: 'BlogType', query: { width: screenWidth, height: screenHeight } })
    })
    return {
      locale: ref(null),
      dateLocale: ref(null),
      // 修改主题（色调）
      darkTheme,
      theme: ref(null),
      // 菜单项是否收缩  false为展开  true为收缩
      collapsed,
      screenHeight,
      screenWidth,
      indexContentWidth,
      inverted: ref(false),
      menuOptions,
      // 菜单收缩
      menu_contraction () {
        collapsed.value = true
        // 内容宽度改变
        indexContentWidth.value = screenWidth - 64
      },
      // 菜单展开
      menu_expansion () {
        collapsed.value = false
        // 内容宽度改变
        indexContentWidth.value = screenWidth - 200
      },
      // 选中的菜单项的key和value，跳转页面
      fill_index_content (key, item) {
        // 更新选中的菜单key
        // clickMenuKey.value = key
        // 跳转页面
        router.push({ name: key, query: { width: screenWidth, height: screenHeight } })
      }
    }
  }
})
</script>
<style>
  /*  */
  /*.index_content{*/
  /*  background-color:#F6E0E0FF;*/
  /*}*/
  .IndexAdmin .n-layout-header {
    height: 25px;
    overflow: hidden;
    border: none;
  }

  /* 头部主题色调变化按钮 */
  .IndexAdmin .n-layout-header .n-space {
    float: right;
  }

  .IndexAdmin .n-layout-header .n-space .n-button {
    height: 25px;
    width: 25px;
  }

  /* 头部logo */
  .IndexAdmin .n-layout-header .n-avatar {
    height: 25px;
    width: 25px;
    margin-left: 8px;
    float: left;
  }

  /* 头部标语 */
  .IndexAdmin .n-layout-header p {
    margin: 0px 0 0 10px;
    font-size: 15px;
    float: left;
  }

  /*右侧内容布局*/
  .index_content {
  }

  .index_content1 {
  }
</style>
